<template>
  <dv-border-box-11 :reverse="true" :color="['#00CCFF','#00CCFF']" class="right-chart-2" :title="mdata.borderTitle">
    <MyChart :options="chartOption" v-if="chartVisiable" />
  </dv-border-box-11>
</template>

<script>
import chartConfig from "./js/chartConfig";
import MyChart from "./widgets/MyChart";
export default {
  name: 'RightChart4',
  components:{
    MyChart
  },
  props:{
    mdata:{
      require:true,
      type:Object
    }
  },
  data () {
    return {
      chartVisiable:false,
      chartOption:{}
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart(){
      this.chartOption = chartConfig.MutiBarOption(this.mdata);
      this.chartVisiable=true;
    }
  }
}
</script>

<style lang="scss" scoped>
.right-chart-2 {
  width: 100%;
  height: calc(33% - 5px);
  padding: 20px 10px 10px;
  display: flex;
  flex-direction: column;
}

</style>
